<template>
  <div class="article-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <my-breadcrumb>评论管理</my-breadcrumb>
      </div>
      <!-- 表格的列是结构；label是标题，prop是数据的来源。表格的行是数据； -->
      <el-table :data="comments" style="width: 100%" v-loading="loading">
        <el-table-column prop="title" label="文章标题" ></el-table-column>
        <el-table-column prop="total_comment_count" label="总评论数" ></el-table-column>
        <el-table-column prop="fans_comment_count" label="粉丝评论数" ></el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="评论状态">
          <!-- comment_status后端传回来的数据是数值，前端要显示对应的字符串,为true表示正常，为false表示关闭-->
          <template slot-scope="scope">
            <el-tag v-if="scope.row.comment_status" >关闭</el-tag>
            <el-tag v-else type="success">打开</el-tag>
          </template>
        </el-table-column>
        <!-- 自定义列：两个按钮 scope.$index当前行的行索引；scope.row当前行的数据-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.comment_status"
              size="mini"
              type="primary"
              @click="hToggleComment(scope.row)"
            >打开评论</el-button>
            <el-button
              v-else
              size="mini"
              type="danger"
              @click="hToggleComment(scope.row)"
            >关闭评论</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 current-change点击页码的时候会触发,并且会传入当前页码-->
      <el-pagination
        :disabled="loading"
        background
        layout="prev, pager, next"
        :page-size="per_page"
        :total="total_count"
        style="margin-top:15px;"
        @current-change="hPageChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import MyBreadcrumb from '../../components/MyBreadcrumb.vue';
import { getComments, modComments } from '@/api/comment';
export default {
  name: 'Comment',
  props: {},
  data () {
    return {
      loading: false, // 是否加载
      comments: [], // 评论数据
      total_count: 0, // 总条数
      per_page: 10, // 每页显示的条数
      page: 1 // 当前页数
    };
  },
  components: {
    MyBreadcrumb
  },
  computed: {},
  created () {
    this.loadComment();
  },
  mounted () {},
  methods: {
    async loadComment () {
      this.loading = true; // 开启查询加载状态
      // 如果用户选择了日期范围，则传入即可；如果用户没有选择日期范围，则要把参数设置为null
      // axios会把参数值为null的数据过滤掉，即不传递这个参数给后端
      // c = a & b;如果a为null则c为null,如果a不是null，则c为b
      try {
        const res = await getComments(this.page, this.per_page);
        this.loading = false; // 关闭查询加载状态
        console.log('获取评论', res);
        this.comments = res.data.data.results;
        this.total_count = res.data.data.total_count;
        this.per_page = res.data.data.per_page;
      } catch (err) {
        this.loading = false; // 关闭查询加载状态
        console.log(err);
        this.$message.error('获取评论失败，参数无效');
      }
    },
    async hToggleComment (comment) {
      try {
        await modComments(comment.id.toString(), !comment.comment_status);
        // 更新数据
        comment.comment_status = !comment.comment_status;
      } catch (error) {
        this.$message.success('操作成功');
      }
    },
    hPageChange (curPage) {
      // 当前页码
      console.log('评论当前页码', curPage);
      // 更新当前页码，再发请求更新视图
      this.page = curPage;
      this.loadComment();
    }
  }
};
</script>

<style scoped lang='less'></style>
